<script lang="ts" setup>
import { getSvg } from "@/utils";
import { getCountByNumber, getLevelDesc } from "../../hooks/useUtils";
withDefaults(defineProps<{ retData: Array<any>; resNumbers: Array<any> }>(), {
  retData: () => [],
  resNumbers: () => []
});
</script>
<template>
  <div class="flex flex-col justify-start items-center gap-y-6">
    <div
      v-for="(it1, idx) in retData"
      :key="idx"
      class="w-298 h-70 bg-[#fff] rounded-10 b-1 b-solid b-#A6D4FF relative"
      :style="{ height: 25 + it1.result.length * 45 + 'px' }"
    >
      <div
        class="w-96 h-34 lh-34 text-center bg-[#FFFFAD] rounded-4 absolute left-30 top-50% translate-y-[-50%] font-bold text-16 color-#004D8E"
      >
        <span>{{ it1.number }}</span>
        <div
          v-if="getCountByNumber(resNumbers, it1.number) > 1"
          class="w-28 h-28 absolute top-[-10px] right-[-10px]"
        >
          <img class="w-28 h-28" :src="getSvg('Group_35')" alt="" />
          <span
            class="absolute left-50% top-50% translate-[-50%] text-9 color-#EF196B font-bold"
            >x{{ getCountByNumber(resNumbers, it1.number) }}
          </span>
        </div>
      </div>
      <div
        class="w-0 h-33 b-l-1 b-l-dashed b-l-#D9D9D9 absolute right-146 top-50% translate-y-[-50%]"
      ></div>
      <div class="h-auto absolute right-31 top-50% translate-y-[-50%]">
        <div
          v-for="(it2, idx) in it1.result"
          :key="idx"
          class="w-92 h-auto flex flex-col justify-between items-stretch mb-4 last-of-type:mb-0"
        >
          <p class="font-bold text-10 color-[#444] text-left">
            <span class="color-#5A5A5A">{{ getLevelDesc(it2.level) }}</span>
            <span class="color-#64D64D">{{ it2?.price }} บาท</span>
          </p>
        </div>
      </div>
      <img
        class="absolute right-0 top-0 w-20 h-full"
        :src="getSvg('Intersect')"
        alt=""
      />
    </div>
  </div>
</template>
